<template>
  <div>
    login
    <!-- ref: 用来获取组件（表单校验）
      表单校验
        model="form"
    -->
    <el-form style="width:400px" ref="form" :rules="rules" :model="form" label-width="80px">

      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="form.phonenumber"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button type="danger" @click="onReset">重置</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rules: {
        phonenumber: [
          { required: true, message: '手机号-用户名不能为空', trigger: 'blur' }, // blur, change 不能为空
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }, // blur, change 不能为空
          { min: 6, max: 8, message: '密码长度必须是6-8', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              // console.log(rule, value)
              if (value === '123456') {
                callback(new Error('这个密码过于简单'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      form: {
        phonenumber: '', // 用户名，手机号
        password: ''
      }
    }
  },
  methods: {
    onReset () {
      this.$refs.form.resetFields()
    },
    onSubmit () {
      // 表单组件.validate(result => {
      this.$refs.form.validate(result => {
        // result 是boolean，表示校验结果
        console.log(result)
        if (result) {
          // 通过
          console.log('submit!')
        } else {
          // 校验失败
          alert('校验失败')
        }
      })

      // 表单校验
      // if (用户名不为空) {
      // if (this.form.phonenumber !== '') {
      //   // 提交
      // } else {
      //   // 提示
      //   alert('手机号不能为空')
      // }
    }
  }
}
</script>
